<!--
//
// GUploadImage.vue
// hs-admin
//
// Created by 区区电脑 on 2023/04/23.
//
-->
<template>
    <div class="GUploadImage">
        <!-- 文件 -->
        <div v-if="modelValue" class="file">
            <span class="">{{modelValue}}</span>
        </div>
        <!-- 文件上传占位 -->
        <el-button v-else type="primary" plain size="small" @click="chooseFile">上传文件</el-button>
        <!-- 进度条 -->
        <div class="progress-bar">
            <!-- 上传中 -->
            <el-progress v-if="progress > 0 && progress < 1" :percentage="progressRate"/>
            <!-- 上传成功 -->
            <el-progress v-if="progress === 1" :percentage="progressRate" status="success"/>
            <!-- 上传失败 -->
            <el-progress v-if="progress === -1" :percentage="progressRate" status="exception"/>
        </div>
        <!-- 操作项 -->
        <div v-if="modelValue" class="actions">
            <el-button size="small" type="primary" link @click="preview">查看</el-button>
            <el-button size="small" type="danger" link @click="remove">移除</el-button>
        </div>
    </div>
</template>

<script>
import * as api from "./api.js"

export default {
    name: "GUploadImage",
    emits: ["update:modelValue", "change"],
    props: {
        fileModule: {
            type: [Number, String],
            default: () => 10
        },
        modelValue: {
            type: String,
            default: () => ""
        },
        extension: {
            type: String,
            default: () => ""
        },
        params: {
            type: Object,
        },
    },
    data() {
        return {
            progress: -2
        }
    },
    computed: {
        progressRate() {
            const progress = this.progress;
            if (progress === -1) return 0
            if (progress === 0) return 0
            if (progress === 1) return 100
            if (progress > 0 && progress < 1) {
                return parseInt(progress * 100)
            }
        }
    },
    methods: {
        preview() {
            const width = 500;
            const height = 600;
            const left = (document.documentElement.clientWidth - width) / 2;
            window.open(this.fullPath(this.modelValue), "", `width=${width}, height=${height}, left=${height}, top=160`)
        },
        remove() {
            this.$emit("update:modelValue", null)
            this.progress = -2
        },
        fullPath(val) {
            return window.$fileFullPath(val)
        },
        chooseFile() {
            $chooseFile({
                count: 1,
                extension: this.extension ? this.extension.split("|") : null,
                success: (files) => {
                    this.upload(files[0])
                }
            })
        },
        async upload(file) {
            console.primary("选择了文件", file)
            const formData = new FormData();
            formData.append("fileList", file);
            const params = this.params ? this.params : {fileModule: this.fileModule};
            const {success, data} = await api.upload(params, formData, (e) => {
                if (e.progress <= 0.98) {
                    this.progress = e.progress
                }
                //console.warning("上传进度", e.progress)
            });
            if (!success) return this.progress = -1;
            this.progress = 1;
            file.filePath = data;
            //console.success("上传成功", data)
            this.$emit("update:modelValue", data)
            this.$emit("change", file)
        }
    }
}
</script>

<style lang="scss" scoped>
.GUploadImage {
    position: relative;
    width: 100%;

    .file {
        width: 100%;
        height: 30px;
        border-radius: 6px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .progress-bar {
        width: 100%;
        margin-top: 2px;
        .el-progress--line {
            width: 100%;
        }
    }
    .actions {
        margin-top: 2px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
}

</style>
